<!--发布公告  -->
<template>
  <div class="box">
    <el-upload :class="NBlist.length > 2 ? 'opIcon' : 'sanpao'" class="upload-demo" ref="upload" action="#"
      :file-list="SeeFileList" auto-upload accept=".png,.jpg" :multiple="false" :on-remove="removeImg"
      :http-request="submitUpload" list-type="picture-card" :before-upload="beforeUpload">
      <!-- <i slot="default" class="el-icon-plus"></i> -->
      <div slot="default" class="default">
        <i class="el-icon-plus"></i>
      </div>
    </el-upload>
    <!-- <span><span style="color: red;">*</span>最多上传三张图片</span> -->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      uploadlist: [],
      // 抛出的最终图片数组
      NBlist: [],
      //当前删除的序号
      index: '',
      SeeFileList: []
    }
  },
  props: {
    FileList: {
      type: Array,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    uploadUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    deleteUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  mounted() {
    if (this.FileList.length > 0) {
      this.FileList.forEach(el => {
        // 负责展示
        this.SeeFileList.push({
          name: el,
          url: el,
        })
        // 负责修改数据
        this.NBlist.push(el)
        this.uploadlist.push(el)
      })
    }
  },
  methods: {
    beforeUpload(file) {

      if (this.NBlist.length > 2) {
        this.$message.error('最多上传三张图片');
        return false
      }
      // 判断图片大小
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 3MB!');
      }
      return isJPG && isLt2M;
    },
    //上传文件
    async submitUpload(e) {
      let data = await JSON.parse(sessionStorage.getItem('serviceEle'))
      console.log(e, '上传的值');
      let formData = new FormData()
      formData.append('pics', e.file)// 传文件
      formData.append('id', this.id)
      this.uploadlist.push(e)
      let res = await this.$api.ImgFile.upload(defaultUrl +this.uploadUrl, formData)
      if (res.data.code == 200) {
        this.NBlist.push(res.data.data[0])
        this.$emit('getImgList', this.NBlist)
      } else {
        this.$message.error('图片上传失败');
        this.aaaaaaaa()
      }
    },
    //删除文件
    async removeImg(e) {
      // 如果删除的是回显的图片话
      if (e.name.indexOf('http') > -1) {
        this.NBlist.forEach((el, i) => {
          if (el == e.name) {
            this.index = i
          }
        })
      } else { // 如果删除正常新增的话
        this.uploadlist.forEach((el, i) => {
          if (typeof el == 'string') {
          } else {
            if (el.file.uid == e.raw.uid) {
              this.index = i
            }
          }
        })
      }
      if (this.NBlist[this.index] == undefined) {
        return
      }
      // 获取选中的图片的名字
      // let lastindex = this.NBlist[this.index].lastIndexOf("/") + 1
      let params = {
        "picName": this.NBlist[this.index]
      }
      let res = await this.$api.ImgFile.delete(defaultUrl +this.deleteUrl, params)
      this.uploadlist.splice(this.index, 1)
      this.NBlist.splice(this.index, 1)
      this.$emit('getImgList', this.NBlist)
  

    },
    aaaaaaaa() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  /deep/ .upload-demo {
    .el-upload--picture-card {
      width: 180px !important;
      height: 77px !important;
    }

    &.opIcon {
      .el-upload--picture-card {
        display: none;
      }
    }

    .default {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-evenly;
    }
  }

  /deep/ .el-upload--picture-card {
    line-height: 20px;
  }
}
</style>